<template>
	<view class="item">
		<view class="item__header">
			<view class="header__title">
				<view class="title__text">{{itemInfo.name}}</view>
				<view class="title__info">
					<text class="info__tag">{{itemInfo.zimudaima}}</text>
					<!-- <text class="info__name">{{itemInfo.shuzidaima}}</text> -->
				</view>
			</view>
			<view class="header__buy" @click="buyClick" v-if="residueDay>0">{{$t('ipo.buy')}}</view>
		</view>
		<view class="item__info">
			<text class="info__title">{{$t('ipo.price')}}</text>
			<text class="info__value">{{itemInfo.shijia}}</text>
		</view>
		<view class="item__info">
			<text class="info__title">{{$t('ipo.deadline')}}</text>
			<text class="info__value">{{itemInfo.kaifangdate}} ~ {{itemInfo.jiezhidate}}</text>
			<view class="info__right">{{$t('ipo.surplus')}}
				<text class="right__num">{{residueDay}}</text>{{$t('ipo.day')}}
			</view>
		</view>
		<view class="item__info">
			<text class="info__title">{{$t('ipo.progress')}}</text>
			<view class="info__process">
				<progress :percent="buyProgress" :stroke-width="12" backgroundColor="#4a4c58" activeColor="#458EF4"/>
				<text class="process__num">{{buyProgress}}%</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {}
		},
		props:{
			itemInfo:{
				type:Object,
				default:()=>({})
			}
		},
		computed:{
			buyProgress(){ //申购进度
				let {kaifangdate, jiezhidate } = this.itemInfo
				let startDay = kaifangdate.replaceAll("-", "/")
				startDay = new Date(startDay).getTime()
				let endDay = jiezhidate.replaceAll("-", "/")
				endDay = new Date(endDay).getTime()
				let curDay = new Date().getTime()
				curDay = curDay > endDay ? endDay : curDay
				let percent = (curDay - startDay) / (endDay - startDay) * 100
				return percent.toFixed(2)
			},
			residueDay(){ //申购剩余时间
				let {jiezhidate} = this.itemInfo
				let num = 0
				if(jiezhidate){
					let day = jiezhidate.replaceAll("-", "/")
					let endDay = new Date(day).getTime()
					let curDay = new Date().getTime()
					let date = ( endDay - curDay) / 1000 / 3600 / 24
					num = date >= 0 ? Math.ceil(date) : 0
				}
				return num
			}
		},
		methods:{
			// 購買點擊
			buyClick(){
				let info = encodeURIComponent(JSON.stringify(this.itemInfo))
				uni.navigateTo({
					url:`/pages/ipo/ipoBuy?info=${info}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.item{
		width: 690rpx;
		background: #282c41;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		padding: 30rpx;
		box-sizing: border-box;
		.item__header{
			@include flexRowAlign(space-between);
			.header__title{
				.title__text{
					font-size: 32rpx;
					font-weight: 800;
					color: #fff;
				}
				.title__info{
					@include flexRowAlign();
					margin-top: 10rpx;
					.info__tag{
						min-width: 48rpx;
						padding: 4rpx 6rpx;
						height: 28rpx;
						background: #0369F6;
						border-radius: 6rpx;
						@include flexCenter();
						font-size: 20rpx;
						color: #FFFFFF;
					}
					.info__name{
						font-size: 24rpx;
						color: #FFFFFF;
						margin-left: 10rpx;
					}
				}
			}
			.header__buy{
				width: 160rpx;
				height: 60rpx;
				padding: 10rpx 0 10rpx 0;
				text-align: center;
				background: #458EF4;
				border-radius: 20rpx;
				font-size: 32rpx;
				font-weight: 800;
				color: #FFFFFF;
				@include flexCenter();
			}
		}
		.item__info{
			@include flexRowAlign();
			margin-top: 20rpx;
			.info__title{
				font-size: 26rpx;
				color: #999999;
				width: 150rpx;
			}
			.info__value{
				font-size: 26rpx;
				color: #fff;
			}
			.info__right{
				flex: 1;
				text-align: right;
				font-size: 26rpx;
				color: #161827;
				.right__num{
					color: #DF4140;
					margin: 0 6rpx;
				}
			}
			.info__process{
				flex: 1;
				position: relative;
				uni-progress{
					border-radius: 10rpx;
					overflow: hidden;
				}
				.process__num{
					color: #fff;
					font-size: 20rpx;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}
			}
		}
	}
</style>